<template>
  <div v-if="list.length == 0" class="courseList" :style="{ height: height }">
    <el-empty description="暂无课程" style="margin-top: 15vh"></el-empty>
  </div>
  <div
    v-else
    class="courseList"
    :style="{ height: height }"
    v-infinite-scroll="load"
    :infinite-scroll-immediate="false"
    infinite-scroll-distance="1"
  >
    <div v-for="(item, index) in list" :key="index" class="course shou">
      <div class="course_table">
        <!-- 封面-信息-评价时间 -->
        <div class="flex">
          <div class="boder_r_b cover">
            <el-image
              :src="item.coursePic"
              :preview-src-list="[item.coursePic]"
              class="coverimg"
            ></el-image>
          </div>
          <div class="boder_r_b info">
            <div class="info_coursename overTxt">{{ item.courseName }}</div>
            <div class="info_workstationname overTxt">
              {{
                item.workstationName ? item.workstationName : "暂无关联工作站"
              }}
            </div>
          </div>
          <div class="border_b evaluationTime">评价时间</div>
        </div>
        <!-- 评分 -->
        <div class="flex">
          <div class="my_evaluation boder_r_b flexColCenter">我的评价</div>
          <!-- 3中评价 -->
          <div class="allevaluation">
            <!-- 课程评价 -->
            <div class="flex evaluation">
              <div class="evaluation_lable boder_r_b">课程评价</div>
              <div class="evaluation_rate boder_r_b">
                <div class="rate_row flex">
                  <span class="rate_lable">教学设计:</span>
                  <el-rate
                    v-model="item.courseStar"
                    disabled
                    show-score
                    :score-template="`${!isNaN(Number(item.courseStar)) ? Number(item.courseStar).toFixed(1) : '0.0'} 分`"
                  ></el-rate>
                </div>
                <div class="rate_row flex">
                  <span class="rate_lable">资源精准:</span>
                  <el-rate
                    v-model="item.resourcesStar"
                    disabled
                    show-score
                    :score-template="`${!isNaN(Number(item.resourcesStar)) ? Number(item.resourcesStar).toFixed(1) : '0.0'} 分`"
                  ></el-rate>

                </div>
                <div class="rate_row flex">
                  <span class="rate_lable">难度适中:</span>
                  <el-rate
                    v-model="item.difficultyStar"
                    disabled
                    show-score
                    :score-template="`${!isNaN(Number(item.difficultyStar)) ? Number(item.difficultyStar).toFixed(1) : '0.0'} 分`"
                  ></el-rate>

                </div>
              </div>
              <div class="evaluation_comment boder_r_b flexColCenter flexCen">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    item.commentToCourse ? item.commentToCourse : '暂无课程评价'
                  "
                  placement="top"
                >
                  <div>
                    {{
                      item.commentToCourse
                        ? item.commentToCourse
                        : "暂无课程评价"
                    }}
                  </div>
                </el-tooltip>
              </div>
            </div>
            <!-- 工作站评价 -->
            <div class="flex evaluation" v-if="item.workstationName">
              <div class="evaluation_lable boder_r_b">工作站评价</div>
              <div class="evaluation_rate boder_r_b">
                <div class="rate_row flex">
                  <span class="rate_lable">设备整齐:</span>
                  <el-rate
                    v-model="item.equipmentStar"
                    disabled
                    show-score
                    :score-template="`${!isNaN(Number(item.equipmentStar)) ? Number(item.equipmentStar).toFixed(1) : '0.0'} 分`"
                  ></el-rate>
                </div>
                <div class="rate_row flex">
                  <span class="rate_lable">场地整洁:</span>
                  <el-rate
                    v-model="item.envStar"
                    disabled
                    show-score
                    :score-template="`${!isNaN(Number(item.envStar)) ? Number(item.envStar).toFixed(1) : '0.0'} 分`"
                  ></el-rate>
                </div>
                <div class="rate_row flex">
                  <span class="rate_lable">管理得当:</span>
                  <el-rate
                    v-model="item.managerStar"
                    disabled
                    show-score
                    :score-template="`${!isNaN(Number(item.managerStar)) ? Number(item.managerStar).toFixed(1) : '0.0'} 分`"
                  ></el-rate>
                </div>
              </div>
              <div class="evaluation_comment boder_r_b flexColCenter flexCen">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    item.commentToWorkstation
                      ? item.commentToWorkstation
                      : '暂无工作站评价'
                  "
                  placement="top"
                >
                  <div>
                    {{
                      item.commentToWorkstation
                        ? item.commentToWorkstation
                        : "暂无工作站评价"
                    }}
                  </div>
                </el-tooltip>
              </div>
            </div>
            <!-- 教师评价 -->
            <div
              class="flex evaluation"
              v-if="item.evaluateTeacherEntities.length > 0"
              v-for="(item1, index1) in item.evaluateTeacherEntities"
              :key="index1"
            >
              <div class="evaluation_lable boder_r_b">
                <div>{{ item1.teacherName }}</div>
                <div>教师评价</div>
              </div>
              <div class="evaluation_rate boder_r_b">
                <div class="rate_row flex">
                  <span class="rate_lable">能力水平:</span>
                  <el-rate
                    v-model="item1.abilityStar"
                    disabled
                    show-score
                    :score-template="`${!isNaN(Number(item.abilityStar)) ? Number(item.abilityStar).toFixed(1) : '0.0'} 分`"
                  ></el-rate>
                </div>
                <div class="rate_row flex">
                  <span class="rate_lable">敬业精神:</span>
                  <el-rate
                    v-model="item1.dedicatedStar"
                    disabled
                    show-score
                    :score-template="`${!isNaN(Number(item.dedicatedStar)) ? Number(item.dedicatedStar).toFixed(1) : '0.0'} 分`"
                  ></el-rate>
                </div>
                <div class="rate_row flex">
                  <span class="rate_lable">教学热情:</span>
                  <el-rate
                    v-model="item1.enthusiasmStar"
                    disabled
                    show-score
                    :score-template="`${!isNaN(Number(item.enthusiasmStar)) ? Number(item.enthusiasmStar).toFixed(1) : '0.0'} 分`"
                  ></el-rate>
                </div>
              </div>
              <div class="evaluation_comment boder_r_b flexColCenter flexCen">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    item1.commentToTeacher
                      ? item1.commentToTeacher
                      : '暂无教师评价'
                  "
                  placement="top"
                >
                  <div>
                    {{
                      item1.commentToTeacher
                        ? item1.commentToTeacher
                        : "暂无教师评价"
                    }}
                  </div>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div class="evaluation_time border_b flexColCenter flexCen">
            {{
              item.studentEvaluateTime
                ? parseTime(item.studentEvaluateTime)
                : "--"
            }}
          </div>
        </div>
        <!-- 教师评语 -->
        <div class="flexColCenter teacherComments">
          <div class="border_r teacherComments_lable">授课教师评语</div>
          <div class="teacherComments_content">
            <!--   教师评语     -->
            <div class="teacherComments_levelReason border_r  overTxt">
              <tooltip
                position="top"
                :text="item.levelReason ? item.levelReason : '暂无评语'"
                width="100%"
              />
            </div>
            <!--   评价项     -->
            <!-- <div style="height: 118px; overflow: auto">
              <div
                class="teacherComments_eval border_r border_b"
                v-for="(
                  evaluateItem, evaluateIndex
                ) in item.evaluateParamStuList"
                :key="evaluateIndex"
              >
                <div class="teacherComments_eval_title border_r">
                  {{ evaluateItem.name }}
                </div>
                <div class="eval_all">
                  <div
                    class="eval_item"
                    v-for="(paramItem, paramIndex) in evaluateItem.paramStuList"
                    :key="paramIndex"
                  >
                    {{ paramItem.paramName }}:{{ paramItem.score }}分
                  </div>
                </div>
              </div>
            </div> -->
          </div>

          <div class="teacherComments_time flexColCenter flexCen">
            {{
              item.teacherEvaluateTime
                ? parseTime(item.teacherEvaluateTime)
                : "--"
            }}
          </div>
        </div>
      </div>
    </div>
    <!-- 评价dialog -->
    <courseEvaluateDialog
      :open.sync="courseEvaluateDialog_open"
      :type="1"
      :item="courseEvaluateDialog_item"
      @refresh="courseEvaluateDialogRefresh"
    ></courseEvaluateDialog>
  </div>
</template>

<script>
import courseEvaluateDialog from "@/components/courseEvaluateDialog.vue";
export default {
  dicts: ["sys_course_type"],
  components: { courseEvaluateDialog },
  props: {
    // select \ primary \ lookPrimary \ studyProgress \evaluate
    type: {
      type: String,
      default: "primary",
    },
    // 学习记录中 有四种类型
    studyProgress: {
      type: [String, Number],
      default: -1,
    },
    height: {
      type: String,
      default: "calc(100vh - 68px - 18px - 145px - 74px)",
    },
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      courseEvaluateDialog_open: false,
      courseEvaluateDialog_item: "",
    };
  },
  watch: {},
  methods: {
    /* 报名 */
    handleApply(item) {
      this.$router.push({
        name: "selectCourseDetail",
        query: {
          courseId: item.courseId,
          workstationId: item.workstationId,
          courseSchedulingId: item.courseSchedulingId,
        },
      });
    },
    /* 评价 */
    handleEvaluate(item) {
      this.courseEvaluateDialog_item = item;
      this.courseEvaluateDialog_open = true;
    },
    /* 评价组件返回函数 */
    courseEvaluateDialogRefresh() {
      this.$emit("refresh");
    },
    load() {},
  },
  created() {},
  mounted() {},
};
</script>
<style scoped lang='scss'>
.course_table {
  margin-bottom: 34px;
  .boder_r_b {
    border-right: 1px solid #e8eaeb;
    border-bottom: 1px solid #e8eaeb;
  }
  .border_r {
    border-right: 1px solid #e8eaeb;
  }
  .border_b {
    border-bottom: 1px solid #e8eaeb;
  }
  width: 1056px;
  border-radius: 8px;
  border: 1px solid #e8eaeb;
  box-sizing: border-box;
  // row1
  .cover {
    width: 127px;
    height: 84px;
    box-sizing: border-box;
    padding: 11px 0 0 13px;
    .coverimg {
      width: 100px;
      height: 64px;
      border-radius: 4px;
    }
  }
  .info {
    box-sizing: border-box;
    padding: 18px 41px 0 41px;
    width: 719px;
    height: 84px;
    .info_coursename {
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
      line-height: 20px;
    }
    .info_workstationname {
      margin-top: 10px;
      font-size: 14px;
      font-family: PingFang-SC-Regular, PingFang-SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }
  }
  .evaluationTime {
    box-sizing: border-box;
    padding: 33px 0 0 55px;
    flex: 1;
    height: 84px;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #333333;
    line-height: 20px;
  }
  // row2
  .my_evaluation {
    box-sizing: border-box;
    padding: 0 0 0 27px;
    box-sizing: border-box;
    width: 127px;
  }
  .allevaluation {
    .evaluation {
      .evaluation_lable {
        padding: 20px 0 0 46px;
        box-sizing: border-box;
        width: 160px;
        height: 94px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
      }
      .evaluation_rate {
        padding: 10px 0 0 44px;
        box-sizing: border-box;
        width: 304px;
        height: 94px;
        .rate_row {
          margin-bottom: 7px;
          .rate_lable {
            margin-right: 5px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC, sans-serif;
            font-weight: 400;
            color: #999999;
            line-height: 20px;
          }
        }
      }
    }
  }
  .evaluation_comment {
    div {
      width: 210px;
      max-height: 60px;
      font-size: 14px;
      font-family: PingFang-SC-Regular, PingFang-SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
      white-space: pre-wrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    width: 255px;
    height: 94px;
  }
  .evaluation_time {
    box-sizing: border-box;
    flex: 1;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
  }
  // row3
  .teacherComments {
    height: 60px;
    .teacherComments_lable {
      width: 127px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
    }
    .teacherComments_content {
      width: 719px;
      height: 100%;
      box-sizing: border-box;
      .teacherComments_levelReason {
        font-size: 14px;
        width: 719px;
        height: 60px;
        display: flex;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
      }
      .teacherComments_eval {
        display: flex;
        align-items: center;
        .teacherComments_eval_title {
          width: 160px;
          height: 100%;
          font-size: 14px;
          color: #262626;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px;
          box-sizing: border-box;
        }
        .eval_all {
          flex: 1;
          padding: 20px;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          .eval_item {
            color: #262626;
            font-size: 14px;
            line-height: 24px;
            margin-left: 10px;
          }
        }
      }
    }
    .teacherComments_time {
      box-sizing: border-box;
      width: 208px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }
  }
}
.full {
  width: 100px;
  height: 40px;
  background: rgba($color: #e95756, $alpha: 0.09);
  border-radius: 20px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #e95756;
  line-height: 40px;
  text-align: center;
}

.cancel {
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
  width: 100px;
  height: 40px;
  background: #fead22;
  border-radius: 20px;
}

.card {
  background: rgba($color: #000000, $alpha: 0) !important;
}

div.courseList::-webkit-scrollbar {
  display: none;
}

div.courseList {
  box-sizing: border-box;
  padding: 0 27px 8px 40px;
  overflow-y: auto;
}

.popoverBox {
  box-sizing: border-box;
  padding: 24px;

  .line {
    margin-bottom: 16px;

    div.label {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
    }

    .redvalue {
      color: #e95756;
    }

    div.value {
      word-wrap: break-word;
      width: 224px;
      margin-left: 16px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;

      .teacher {
        margin-right: 16px;
      }
    }
  }

  .line:nth-last-of-type(1) {
    padding-bottom: 0 !important;
  }
}
</style>
